<script setup lang="ts">
import { time2dHHMMss } from '@/widgets'
import { MapItemLink } from '@/map-item'
import { airportMapItem, type Airport } from '../airport'
import { waypointMapItem } from '../waypoint'
import { getAirportFlightPlanInfo } from './fpl-index'
import { flightPlanMapItem } from './map-item'
import { showAirportArrivalFlightPlanTable, showAirportDepartureFlightPlanTable } from './util'

const props = defineProps<{ type: string; item: Airport }>()
const aptInfo = getAirportFlightPlanInfo(props.item.id)
const dep = aptInfo.departure.slice(0, 5)
const arr = aptInfo.arrival.slice(0, 5)

function showDepFPL() {
  showAirportDepartureFlightPlanTable(props.item.id)
}

function showArrFPL() {
  showAirportArrivalFlightPlanTable(props.item.id)
}
</script>
<template>
  <div class="apt-fpl-info pane-block">
    <template v-if="aptInfo.departure.length > 0">
      <div class="map-block-header">
        <div>离港航班({{ aptInfo.departure.length }})</div>
      </div>
      <div class="row">
        <div class="col-6em">航班</div>
        <div class="col-5em">离港点</div>
        <div class="col-6em">落地机场</div>
        <div class="col-5em">开始时间</div>
      </div>
      <div class="row" v-for="f in dep">
        <MapItemLink class="col-6em" :item="flightPlanMapItem" :txt="f.id" />
        <MapItemLink class="col-6em" :item="waypointMapItem" :txt="f.depFix!" />
        <MapItemLink class="col-6em" :item="airportMapItem" :txt="f.arrApt" v-if="f.arrApt" />
        <div v-else class="col-6em">-</div>
        <div class="col-5em">{{ time2dHHMMss(f.startTime) }}</div>
      </div>
      <div class="row" v-if="aptInfo.departure.length > 5">
        <div class="map-hover" @click="showDepFPL">显示更多...</div>
      </div>
    </template>
    <div v-else class="row">
      <div>离港航班(0)</div>
    </div>
    <template v-if="aptInfo.arrival.length > 0">
      <div class="map-block-header">
        <div>进港航班({{ aptInfo.arrival.length }})</div>
      </div>
      <div class="row">
        <div class="col-6em">航班</div>
        <div class="col-5em">进港点</div>
        <div class="col-6em">起飞机场</div>
        <div class="col-5em">开始时间</div>
      </div>
      <div class="row" v-for="f in arr">
        <MapItemLink class="col-6em" :item="flightPlanMapItem" :txt="f.id" />
        <MapItemLink class="col-6em" :item="waypointMapItem" :txt="f.arrFix!" />
        <MapItemLink class="col-6em" :item="airportMapItem" :txt="f.depApt" v-if="f.depApt" />
        <div v-else class="col-6em">-</div>
        <div class="col-5em">{{ time2dHHMMss(f.startTime) }}</div>
      </div>
      <div class="row" v-if="aptInfo.arrival.length > 5">
        <div class="map-hover" @click="showArrFPL">显示更多...</div>
      </div>
    </template>
    <div v-else class="row">
      <div>进港航班(0)</div>
    </div>
  </div>
</template>
